
addEventListener('DOMContentLoaded', function(e)
{	
	var pages = {
			'home':0,
			'work':1,
			'play':2
		},
		current_section	= 'home',
		nav				= document.getElementById('nav'),
		msg				= document.getElementById('msg'),
		items			= nav.getElementsByTagName('li'),
		numNodes		= items.length;

	// Attach to top nav
	for ( var i=0; i < numNodes; i++ )
	{
		if ( items[i].firstElementChild.href.indexOf("#") != -1 )
		{
			items[i].firstElementChild.onclick = navClickHandler;
		}
	}

	function navClickHandler( e )
	{
		var new_nav_id					= this.id,
			new_section					= new_nav_id.replace('nav-',''),
			new_section_idx				= pages[new_section],
			new_section_container_id	= new_nav_id.replace('nav','body'),
			new_section_container		= document.getElementById(new_section_container_id),
			current_section_idx			= pages[current_section],
			current_section_container_id= "body-" + current_section,
			current_section_container	= document.getElementById(current_section_container_id);
			
		// Update the Navbar styles
		removeActiveNavClass();
		this.parentNode.className = "active";

		// Animate the current section out
		var current_section_style="container",
			new_section_style="container";
		if ( new_section_idx > current_section_idx )
		{
			current_section_style = "container animated bounceOutLeft";
			new_section_style = "container animated bounceInRight";
		}
		else
		{
			current_section_style = "container animated bounceOutRight";
			new_section_style = "container animated bounceInLeft";
		}
		current_section_container.className = current_section_style;

		// Wait and then animate the new page in
		window.setTimeout(function(currentSection, newSection, newStyle)
		{
			return function()
			{
				currentSection.className += " hide";
				newSection.className = newStyle;
			}
		}(current_section_container, new_section_container, new_section_style), 500);
		
		current_section = new_section;
		
		return false;
	}

	
	function removeActiveNavClass()
	{
		for ( var i=0; i < numNodes; i++ )
		{
			if ( items[i].className == "active" )
			{
				items[i].className = "";
				return true;
			}
		}
	}
	
	// Handle non empty URL hash on initial load
	if ( document.location.hash !== "" )
	{
		var nodeId = document.location.hash.replace('#', 'nav-'),
			node = document.getElementById(nodeId);
		navClickHandler.call( node, null );
		
	}
	
});

